import React, { Component } from 'react';

class App extends Component {
  render() {
		const { keyCode, keyTrigger, id, url } = this.props
    return (
      <div className="item" ref={ ref => this.item = ref } >
        <b>{ keyTrigger }</b>
        <audio src={ url } ref={ ref => this.el = ref }></audio>
      </div>
    );
  }
	handleActive() {
		this.item.classList.add('active')
		this.el.play()
		setTimeout(() => {
			this.item.classList.remove('active')
		}, 200)
	}
	handleKeyDown = (e) => {
		const { keyCode } = this.props
		e.keyCode === keyCode && this.handleActive()
	}
	componentDidMount() {
		document.addEventListener('keydown', this.handleKeyDown)
	}
	componentWillUnmount() {
		document.removeEventListener('keydown', this.handleKeyDown)

	}
}

export default App;
